<template>
	<div class="_wrapper">
		<div id="mars3dContainer" class="mars3d-container"></div>
		<div class="_flex _flex-dis-10 _p10">
			<button class="_btn-1" @click="setCameraView()">镜头高度1700000</button>
			<button class="_btn-1" @click="areaMask()">区域遮罩</button>
			<button class="_btn-1" @click="areaWall()">区域分割墙</button>
			<button class="_btn-1" @click="addImg()">增加贴图</button>
			<button class="_btn-1" @click="popup()">地图弹窗消息</button>
			<!-- <button class="_btn-1" @click="draw()">图形绘制</button> -->
		</div>
		<div class="_p10">
			<el-descriptions>
				<el-descriptions-item label="镜头信息">{{cameraView}}</el-descriptions-item>
				<el-descriptions-item label="图层信息">{{layers.map(item => item.name)}}</el-descriptions-item>
			</el-descriptions>
		</div>
	</div>
</template>

<script>
	//引入cesium基础库
	import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
	import * as Cesium from "mars3d-cesium";

	//导入mars3d主库
	import "mars3d/dist/mars3d.css";
	import * as mars3d from "mars3d";

	//导入mars3d插件（按需使用，需要先npm install）
	import "mars3d-space";

	import marsConfig from "./mars-config.js";
	import ToolMars from "./tool-mars";
	let toolMark;
	export default {
		data() {
			return {
				cameraView: "",
				layers: []
			}
		},
		mounted() {
			toolMark = ToolMars.init();

			setInterval(() => {
				this.cameraView = toolMark.getCameraView();
				this.layers = toolMark.layer();
			}, 1000)
		},
		methods: {
			popup() {
				toolMark.popup();
			},
			addImg() {
				toolMark.addImg();
			},
			areaMask() {
				toolMark.areaMask();
			},
			areaWall() {
				toolMark.areaWall();
			},
			setCameraView(options = {}) {
				toolMark.setCameraView(options);
			}
		},
	}


	function draw() {
		map.graphicLayer.startDraw({
			type: "polygon",
			style: {
				color: "rgba(0, 123, 230, 0.5)",
				outline: false
			},
			success: function(graphic) {
				const positions = graphic.positionsShow

				// 更新最大、最小高度值
				// updateHeightRange(positions, callback)
				floodByMaterial.addArea(positions)
			}
		})
	}

	function initDraw() {

		// 基于地球材质，可以多个区域
		floodByMaterial = new mars3d.thing.FloodByMaterial({
			color: "rgba(0, 123, 230, 0.5)" // 淹没颜色
		});

		map.addThing(floodByMaterial);

		floodByMaterial.on(mars3d.EventType.start, function(e) {
			console.log("开始分析", e)
		})

		floodByMaterial.on(mars3d.EventType.change, function(e) {
			const height = e.height
			eventTarget.fire("heightChange", {
				height
			})
		})

		floodByMaterial.on(mars3d.EventType.end, function(e) {
			console.log("结束分析", e)
		})
	}
</script>

<style scoped>
	.mars3d-container {
		width: 100%;
		height: 80%;
	}
</style>
